<template>
    <div>
        <h1>插槽 Slots</h1>
        // 定义is-zhengdao变量，把父组件的num通过isZhengdao传给子组件
        <SonDemo13 :is-zhengdao="num">
            <button type="button" @click="changeNum">下一句</button>
        </SonDemo13>

        <SonDemo14></SonDemo14>
        <SonDemo14>
            <div>
                <p @click="() => num1++">渲染作用域:插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的</p>
                num1: {{ num1 }}
            </div>
            <p>还可以放入其他子组件：</p>
            <SonDemo13 :is-zhengdao="num"></SonDemo13>
        </SonDemo14>
        <SonDemo15>
            <template #default>
                <div>new main</div>
            </template>

            <template #header>
                <div>new header</div>
            </template>

            <template #footer>
                <div>new footer</div>
            </template>
        </SonDemo15>

        <SonDemo15>
            <!-- <template #header>
                <div>new header</div>
            </template> -->
            <template #[dynamicSlotName]> 我是一块砖 </template>
            <template #default>
                <div>new main</div>
                <button type="button" @click="editDynamicSlotName">修改动态具名插槽</button>
            </template>
            <template #footer>
                <div>new footer</div>
            </template>

        </SonDemo15>


        <SonDemo16>
            <template #default="{ msg: message }">
                <div> new main {{ message }}</div>
            </template>
            <template #header="{ title }">
                <div> new header {{ title }}</div>
            </template>
            <template #footer>
                <div> new footer</div>
            </template>
        </SonDemo16>


    </div>
</template>

<script lang="ts">
export default {
    name: 'diyDemo44'
}
</script>

<script setup lang='ts'>
import { ref } from 'vue';
import SonDemo13 from './components/SonDemo13.vue';
import SonDemo14 from './components/SonDemo14.vue';
import SonDemo15 from './components/SonDemo15.vue';
import SonDemo16 from './components/SonDemo16.vue';

const num = ref<number>(1)
const num1 = ref(1)
const dynamicSlotName = ref('')
const changeNum = () => {
    if (num.value < 4) {
        return num.value++
    } else {
        num.value = 1
    }
}

const editDynamicSlotName = () => {
    dynamicSlotName.value = 'header'
}



</script>

<style></style>